<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入检测分类名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="editData">新 增</el-button>
    <Table border
           :columns="titles"
           :data="dataList"
           stripe
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="editData(row)">编辑</span>
        <span @click="deleteData(index)">删除</span>
      </template>
    </Table>
    <page :current.sync="currentPage"
          :total="totals"
          :page-size="pageSize"
          @on-change="initTableData"
          show-total
          ref="page"></page>
    <Modal v-model="confirmModal"
           title="是否删除"
           :loading="loading"
           @on-ok="goToDelete">
      <p>您确定删除该条数据吗？</p>
    </Modal>
    <el-dialog title="检测分类图标"
               center
               :visible.sync="imageModal"
               width="30%">
      <img :src="imageUrl"
           style="width:100%;height:100%">
      <span slot="footer">
        <el-button type="primary"
                   @click="imageModal = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "detectTypeList",
    data () {
      return {
        imageModal: false,
        imageUrl: null,
        searchCondition: '',
        currentPage: 1,
        totals: 0,
        pageSize: 20,
        confirmModal: false,
        loading: true,
        deleteIndex: null,
        titles: [
          {
            title: '检测分类名称',
            key: 'name'
          },
          {
            title: '检测分类图标',
            key: 'imageUrl',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.imageUrl
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    'border-radius': '50%'
                  },
                  on: {
                    click: (event) => {
                      this.showBigImage(params.row.imageUrl);
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '标签',
            key: 'labels'
          },
          {
            title: '排序号',
            key: 'sortNum'
          },
          {
            title: '类型',
            key: 'type',
            /*  { id: 1, name: "按检查类型检测" },
         { id: 2, name: "按病症类别检测" },
         { id: 3, name: "毒品检测" },
         { id: 4, name: "校园快检" },
         { id: 5, name: "独家/特色" } */
            render: (h, params) => {
              return h('span')
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        dataList: []
      }

    },
    created () {
      this.initTableData();
    },

    methods: {
      showBigImage (url) {
        this.imageUrl = url;
        this.imageModal = true;
      },
      handleQuery (){
        this.currentPage=1
        this.initTableData()
      },
      initTableData () {
        let pageIndex = this.currentPage - 1;
        if (this.searchCondition && this.searchCondition.trim() !== "") {
          pageIndex = 0;
        }
        let param = {
          pageSize: this.pageSize,
          pageIndex: pageIndex,
          name: this.searchCondition
        };

        let param1 = {
          name: this.searchCondition,
          pageSize: this.pageSize,
          pageIndex: this.currentPage - 1
        };
        this.post(this.api.detectType.getDetectTypePageList, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      handleChange (page) {
        let _start = (page - 1) * this.pageSize;
        let _end = page * this.pageSize;
      },
      editData (row) {
        let id = null;
        if (row) {
          id = row.id;
        }
        this.$router.push({ name: 'editDetectType', query: { id: id } })
      },
      deleteData (index) {
        this.deleteIndex = index;
        this.confirmModal = true;
      },
      goToDelete () {
        let obj = this.dataList[this.deleteIndex];
        if (obj) {
          this.post(this.api.detectType.deleteDetectType, { "id": obj.id }).then((res) => {
            this.confirmModal = false;
            if (res.data.code === '200') {
              this.$Message.success("删除成功");
              this.initTableData();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        }
      }
    },

  }
</script>

<style scoped>
</style>
